<template>
  <canvas id="myChart"></canvas>
</template>

<script>
import F2 from '@antv/f2'
export default {
  name: 'delayapplication',
  props: {
    delaydata: {
      type: Number
    },
    color: {
      type: String,
      default: '#87C138'
    },
    bgColor: {
      type: String,
      default: '#E2D856'
    },
    maxNum: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      delayapdate: null
    }
  },
  watch: {
    delaydata(newVal) {
      this.delayapdate = newVal
      this.delayData()
    }
  },
  created() {
    this.delayapdate = this.delaydata
  },
  mounted() {
    this.delayData()
  },
  methods: {
    delayData() {
      const data = [
        {
          x: '2',
          y: this.delayapdate
        }
      ]
      const chart = new F2.Chart({
        id: 'myChart',
        padding: [5, 'auto'],
        pixelRatio: window.devicePixelRatio
      })
      chart.source(data, {
        y: {
          max: 600,
          min: 0
        }
      })
      chart.axis(false)
      chart.tooltip(false)
      chart.coord('polar', {
        transposed: true,
        innerRadius: 0.8,
        radius: 0.85
      })
      chart.guide().arc({
        start: [0, 0],
        end: [1, 598.88],
        top: false,
        style: {
          lineWidth: 8,
          stroke: this.bgColor
        }
      })
      chart.guide().text({
        position: ['50%', '53%'],
        content: this.delayapdate,
        style: {
          fill: this.color,
          fontWeight: 'bold',
          fontFamily: 'iconfont',
          fontSize: 26
        }
      })
      chart
        .interval()
        .position('x*y')
        .size(10)
        .color(this.color)
        .animate({
          appear: {
            duration: 1200,
            easing: 'cubicIn'
          }
        })
      chart.render()
    }
  }
}
</script>

<style scoped>
#myChart {
  width: 100%;
  height: 220px;
  margin-top: 20px;
}
</style>
